import React, { useEffect, useState } from 'react'
import "./index.css"
import axios from 'axios'
import { useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom';
export default function Heroscon() {

    //声明英雄详情状态
    let [heroscon,setHeroscon] = useState({});

    // 使用 useParams()  获取地址栏 params 参数
    // let {id,name} = useParams();


    // 使用 useSearchParams()  获取地址栏  query 参数
   /*  let [search,setSearch] = useSearchParams();
    // console.log(search);
    //获取id
    let id = search.get("id");
    let name = search.get("name");
    // console.log(id,name) */

    //使用 useLocation 获取 路由传递的 state 参数

    // console.log(window.history);

    let {state:{id}} = useLocation();
    // console.log(id);


    // 使用 useNavigate()  来获取 navigate 函数
   let navigate = useNavigate();
   
    //初始化请求数据
    useEffect(()=>{
        // // 英雄id
        // let id = 8;

        async function main(){
            let {data} = await axios.get(`http://api.xiaohigh.com/heros/${id}`);
            // console.log(data);

            //更新状态
            setHeroscon(data);
        }

        main();
    },[])



    //创建 回退上一页方法
    let back = ()=>{
        // 回退上一页
        navigate(-1); 
    }



    return (
        <div className="heros-con">
            <div className="heros-left">

                <button onClick={back}>回退</button>

                <img src={heroscon.image && `http://cdn.xiaohigh.com${heroscon.image}`} alt="" />
                <h2>{heroscon.name}</h2>
                <h3>{heroscon.type}</h3>
                <div className="img-min">
                    <ul>
                        {
                            heroscon.skills && heroscon.skills.map((item,index) =>{
                                return <li key={index}>
                                            <img src={`http://cdn.xiaohigh.com${item.img}`} alt="" />
                                            <h4>{item.name}</h4>
                                        </li>
                            })
                        }
                        
                       
                    </ul>
                </div>
            </div>
            <div className="heros-right">
                <img src={heroscon.big_image && `http://cdn.xiaohigh.com${heroscon.big_image}`} alt="" />
                <hr />
                <p  dangerouslySetInnerHTML={{__html:heroscon.intro}}  ></p>
            </div>
        </div>
    )
}
